import useTooltip from '../../components/common/tooltip'
import sass from '../../assets/scss/variable.module.scss'
console.log(sass.color)
export function getRightCharts() {
  return {
    tooltip: {
      trigger: 'axis',
      formatter: (formatterList: unknown) => {
        return useTooltip(formatterList, '')
      }
    },
    xAxis: {
      type: 'category',
      data: [] as string[],
      axisLabel: {
        overflow: 'truncate',
        ellipsis: '...',
        width: 60,
        interval: 0,
        color: sass.color
      }
    },
    grid: { left: 30, right: 0, top: 10, bottom: 40 },
    yAxis: {
      type: 'value',
      minInterval: 1
    },
    dataZoom: {
      type: 'slider',
      show: true,
      startValue: 0,
      endValue: 6,
      height: 10,
      bottom: 0,
      showDetail: false,
      showDataShadow: false,
      fillerColor: sass.theme,
      borderColor: 'transparent',
      zoomLock: true,
      brushSelect: false,
      handleStyle: {
        opacity: 0
      },
      lineStyle: {
        opacity: 0
      },
      textStyle: {
        fontSize: 0
      }
    },
    series: [
      {
        type: 'bar',
        data: [] as number[],
        smooth: true,
        color: sass.theme
      }
    ]
  }
}

export function getLeftCharts() {
  return {
    color: [sass.theme, sass.dangerColor],
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}%'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: ['40%', '70%'],
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        data: [] as Record<string, number | string>[]
      }
    ]
  }
}
